import { observer, useLocalStore } from 'mobx-react';
import React, { createRef, useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import "./DynInput.css";

let ref = createRef<HTMLDivElement>();

const App = observer(() =>
{
    let store = useLocalStore(() => ({ x: 0, y: 0 }));

    let call = (e: MouseEvent) =>
    {
        if (ref.current)
        {
            store.x = e.clientX;
            store.y = e.clientY;

            //https://zhuanlan.zhihu.com/p/78230297
            // ref.current.style.transform = `translate(${e.clientX}px,${e.clientY}px)`;
            // ref.current.style.left = `${e.clientX}px`;
            // ref.current.style.top = `${e.clientY}px`;
        }
    };

    useEffect(() =>
    {
        app.addEventListener("mousemove", call, false);
        return () => app.removeEventListener("mousemove", call);
    });

    return (
        <div>
            <div id="f" ref={ref}>
                <span>请输入第一个点</span>
                <input style={{ background: "#fff" }}></input>
                <input style={{ background: "#999" }}></input>
            </div>

            <div style={{
                width: 300, height: 300,
                background: "#fff",
                textAlign: "center",
                display: "flex",
                alignItems: "center",
                flexDirection: "column",
                justifyContent: "center",
            }}>
                <span style={{}}>测试</span>
            </div>
        </div>
    );
});

let app = document.getElementById("app");

ReactDOM.render(<App />, app);
